<template>
  <view class="mine-container">
    <!-- 用户信息区域 -->
    <view class="user-info">
      <image class="avatar" src="/static/images/avatar.png"></image>
      <view class="info">
        <text class="username">{{ userInfo.username }}</text>
      </view>
    </view>

    <!-- 菜单列表 -->
    <view class="menu-list">
      <view class="menu-item" @click="goToAppointments">
        <view class="left">
          <text class="iconfont icon-order"></text>
          <text class="text">我的预约</text>
        </view>
        <text class="iconfont icon-arrow-right"></text>
      </view>
      
      <view class="menu-item" @click="goToFeedback">
        <view class="left">
          <text class="iconfont icon-feedback"></text>
          <text class="text">帮助与反馈</text>
        </view>
        <text class="iconfont icon-arrow-right"></text>
      </view>
      
      <view class="menu-item" @click="goToAbout">
        <view class="left">
          <text class="iconfont icon-about"></text>
          <text class="text">关于我们</text>
        </view>
        <text class="iconfont icon-arrow-right"></text>
      </view>

      <view class="menu-item" @click="handleLogout">
        <view class="left">
          <text class="iconfont icon-logout"></text>
          <text class="text">退出登录</text>
        </view>
        <text class="iconfont icon-arrow-right"></text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {}
    }
  },

  onShow() {
    this.getUserInfo()
  },

  methods: {
    getUserInfo() {
      const userInfo = uni.getStorageSync('userInfo')
      if (userInfo) {
        this.userInfo = userInfo
      } else {
        uni.navigateTo({
          url: '/pages/login/index'
        })
      }
    },

    goToAppointments() {
      uni.switchTab({
        url: '/pages/appointment/index',
        fail: (err) => {
          console.error('跳转失败：', err)
          uni.showToast({
            title: '跳转失败',
            icon: 'none'
          })
        }
      })
    },

    goToAbout() {
      uni.navigateTo({
        url: '/pages/mine/about'
      })
    },

    handleLogout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            // 清除本地存储
            uni.removeStorageSync('userInfo')
            uni.removeStorageSync('token')
            
            // 跳转到登录页
            uni.reLaunch({
              url: '/pages/login/index'
            })
          }
        }
      })
    },

    goToFeedback() {
      uni.navigateTo({
        url: '/pages/mine/feedback'
      })
    }
  }
}
</script>

<style lang="scss">
.mine-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  
  .user-info {
    display: flex;
    align-items: center;
    padding: 40rpx;
    background: linear-gradient(to right, #007AFF, #1cbbb4);
    margin-bottom: 20rpx;
    
    .avatar {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      border: 4rpx solid rgba(255, 255, 255, 0.4);
      margin-right: 30rpx;
    }
    
    .info {
      .username {
        font-size: 36rpx;
        color: #fff;
        font-weight: bold;
        text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
      }
    }
  }
  
  .menu-list {
    background: #fff;
    border-radius: 20rpx;
    margin: 0 20rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
    
    .menu-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 30rpx;
      border-bottom: 2rpx solid #f5f5f5;
      
      &:last-child {
        border-bottom: none;
      }
      
      &:active {
        background-color: #f9f9f9;
      }
      
      .left {
        display: flex;
        align-items: center;
        
        .iconfont {
          font-size: 40rpx;
          margin-right: 20rpx;
          color: #007AFF;
          
          &.icon-order {
            color: #007AFF;
          }
          
          &.icon-about {
            color: #1cbbb4;
          }
          
          &.icon-logout {
            color: #ff5a5f;
          }
          
          &.icon-feedback {
            color: #ffa500;
          }
        }
        
        .text {
          font-size: 30rpx;
          color: #333;
        }
      }
      
      .icon-arrow-right {
        font-size: 32rpx;
        color: #999;
      }
    }
  }
}
</style> 